import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import mzsdk from 'utils/mzsdk';

/**
 * 低延迟的播放控制栏（只有直播状态）
 */

var timer = null;
var delayTime = 3000;

export function addRTCOnlyLiveControl() {
    console.log('开始加载 低延迟(直播)的 控制栏');

    addPlayButton()
    addLiveControls()
    addRTCLiveEventListen()

    var videoEle = document.getElementById("mz-video");
    mzsdk.player.remoteStream.play(videoEle);
}

function play() {
    var videoEle = document.getElementById("mz-video");
    videoEle.play()
}

function showControlsBar() {
    var rtcLiveControls = document.getElementById("rtc-live-controls");

    if (!rtcLiveControls.classList.contains("show")) {
        rtcLiveControls.classList.add("show")
    }

    if (timer) {
        clearTimeout(timer)
    }
    timer = setTimeout(() => {
        hideControlBar()
    }, delayTime);
}

function hideControlBar() {
    var rtcLiveControls = document.getElementById("rtc-live-controls");
    if (rtcLiveControls.classList.contains("show")) {
        rtcLiveControls.classList.remove("show")
    }
}

function enterFullScreen() {
    var videoEle = document.getElementById("mz-video")
    if (videoEle.requestFullscreen) {
        videoEle.requestFullscreen();
    } else if (videoEle.mozRequestFullScreen) {
        videoEle.mozRequestFullScreen();
    } else if (videoEle.webkitRequestFullScreen) {
        videoEle.webkitRequestFullScreen();
    } else if (videoEle.webkitEnterFullScreen) {
        videoEle.webkitEnterFullScreen();
    } else if (videoEle.oRequestFullscreen) {
        videoEle.oRequestFullscreen();
    } else if (videoEle.msRequestFullscreen) {
        videoEle.msRequestFullscreen();
    }
}

function exitFullScreen() {
    if (document.exitFullscreen) {
        document.exitFullscreen();
    } else if (document.msExitFullscreen) {
        document.msExitFullscreen();
    } else if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen();
    } else if (document.webkitCancelFullScreen) {
        document.webkitCancelFullScreen();
    } else if (document.oRequestFullscreen) {
        document.oRequestFullscreen();
    }
}

// 添加播放按钮
function addPlayButton() {
    var videoEle = document.getElementById("mz-video")

    var playDom = document.createElement('div');

    const playDiv = (
        <button className="rtc-live-play-button" id="rtc-live-play-button" onClick={play}></button>
    );
    ReactDOM.render(playDiv, playDom);
    videoEle.parentElement.append(playDom)
}

// 添加控制栏
function addLiveControls() {
    var videoEle = document.getElementById("mz-video")

    var controlsDom = document.createElement('div');

    const rtcLiveControls = (
        <div className="rtc-live-controls" id="rtc-live-controls">
            <div className="rtc-live-controls-bar-wrap">
                <p className="rtc-live-controls-bar-text">实时直播</p>
                <button className="rtc-live-controls-bar-fullscreen" onClick={enterFullScreen}></button>
            </div>
        </div>
    );
    ReactDOM.render(rtcLiveControls, controlsDom);
    videoEle.parentElement.append(controlsDom)
}

// 添加事件监听
function addRTCLiveEventListen() {
    var videoEle = document.getElementById("mz-video")

    videoEle.onclick = () => {
        showControlsBar()
    }

    videoEle.addEventListener("play", function (e) {
        let playEle = document.getElementById("rtc-live-play-button")
        if (playEle) {
            playEle.style.display = "none"
        }
    })

    videoEle.addEventListener('pause', function (e) {
        let playEle = document.getElementById("rtc-live-play-button")
        if (playEle) {
            playEle.style.display = "block"
        }
    })

    videoEle.addEventListener('loadstart', function (e) {
        // 这个通知是开启加载弹幕组件
        mzsdk.mzee.emit('barrage_start')
        // 这个通知是用于竖屏播放下，让msgbox响应手势
        mzsdk.mzee.emit('vertical_chat_pointEvent_enable')
    })

    videoEle.addEventListener('waiting', function (e) {
        console.log('视频加载中...')
    })

    videoEle.addEventListener('ended', function (e) {
        console.log('视频播放结束')
    })

    videoEle.addEventListener('error', function (e) {
        console.log('视频播放错误')
    })
}

